import ScrollPageList from '@/components/ScrollPageList';
import { css } from '@emotion/react';
import { List } from 'antd';
import { GetScrollPageParam } from 'common/interface';
import { Fragment, ReactNode, useState } from 'react';
import Item from './Item';
import { useUpdateEffect } from 'ahooks';
import Rate from '@/components/Rate';
import { eqV1ControllerIndexOpen } from '@/services/auto/eq';

export default function EqList({
  keyword,
}: {
  keyword?: string;
}) {

  const [searchParam, setSearchParam] = useState<
    GetScrollPageParam<API.EqV1ControllerIndexOpenParams>
  >({
    keyword,
  });

  useUpdateEffect(() => {
    setSearchParam((ori) => {
      return {
        ...ori,
        keyword,
      };
    });
  }, [keyword]);

  return (
    <Fragment>
      <div
        style={{
          marginLeft: -8,
          marginRight: -8,
        }}
      >
        <ScrollPageList
          param={searchParam}
          service={eqV1ControllerIndexOpen}
          order={{
            orderBy: 'createTime',
            direction: 'DESC',
          }}
        >
          {(data) => {
            return (
              <Rate.TagProvider>
                <List
                  grid={{ gutter: 16, column: 4 }}
                  dataSource={data}
                  rowKey="uuid"
                  renderItem={(item) => {
                    return <Item item={item} />;
                  }}
                  css={css`
                  &
                    > .ant-spin-nested-loading
                    > .ant-spin-container
                    > .ant-row {
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                  }
                `}
                />
              </Rate.TagProvider>
            );
          }}
        </ScrollPageList>
      </div>
    </Fragment>
  );
}
